<template>
  <div class="peipao_body">
    <div class="page_tab_div">
      <el-tabs v-model="tab_active">
        <el-tab-pane
          v-for="(v, k) in tab_list"
          :key="k"
          :label="v.label"
          :name="v.name"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="serch_div">
      <el-row type="flex" justify="center">
        <el-col :span="24">
          <el-form
            :inline="true"
            :model="serch_form"
            :label-width="'92px'"
            class="ty_serch_form"
          >
            <el-form-item label="名称">
              <el-input v-model="serch_form.name"></el-input>
            </el-form-item>

            <el-form-item>
              <div class="ty_serch_btn">
                <el-button class="cx_btn" type="primary" size="small">查 询</el-button>
                <el-button class="cz_btn" size="small">重 置</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <div class="table_body">
      <ty-Table :tablePrps="tablePrps" :tableData="tableData" :fixed_width="'250'">
        <!-- <template slot-scope="props" slot="diy_column">
          <template v-if="props.row.key == 'status'">
            {{ props.row.status == 1 ? "启用" : "禁用" }}
          </template>
        </template> -->

        <template slot="diy_fixed" slot-scope="props">
          <el-button class="dl_color_btn" type="text" @click="detail_click"
            >详情</el-button
          >
          <el-button class="dl_color_btn" type="text">删除</el-button>
        </template>
      </ty-Table>

      <el-row type="flex" justify="center">
        <el-col :span="24">
          <div class="ty_fy_div">
            <el-pagination
              :current-page="fyData.start"
              :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
              :page-size="fyData.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="fyData.totalRows"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-col>
      </el-row>
    </div>

    <!--报告详情-->
    <el-drawer size="50%" :visible.sync="drawer_detail_show">
      <div slot="title" class="d_title">客户详情</div>
      <div class="drawer_detail_body">
        <div class="item grid_div">
          <div class="g_item">客户ID：002</div>
          <div class="g_item">客户姓名：杨淑</div>
          <div class="g_item">企业名称：重庆企业咨询有限公司</div>
          <div class="g_item">性别：女</div>
          <div class="g_item">年纪：52</div>
          <div class="g_item">身份证号：500221199105050202</div>
          <div class="g_item">手机号码：13615484646</div>
          <div class="g_item">代理人：陈老师</div>
          <div class="g_item">客户标记：一般客户</div>
          <div class="g_item">所在地址：</div>
        </div>
        <div class="item">
          <div class="title">管理资料</div>
          <tyTable
            :tablePrps="zl_tablePrps"
            :tableData="zl_tableData"
            :operation="false"
          ></tyTable>

          <el-row type="flex" justify="center">
            <el-col :span="24">
              <div class="ty_fy_div">
                <el-pagination
                  :current-page="zl_fyData.start"
                  :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                  :page-size="zl_fyData.limit"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="zl_fyData.totalRows"
                  @size-change="zl_handleSizeChange"
                  @current-change="zl_handleCurrentChange"
                />
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="item">
          <div class="title">报告列表</div>
          <tyTable
            :tablePrps="bg_tablePrps"
            :tableData="bg_tableData"
            :operation="false"
          ></tyTable>

          <el-row type="flex" justify="center">
            <el-col :span="24">
              <div class="ty_fy_div">
                <el-pagination
                  :current-page="bg_fyData.start"
                  :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                  :page-size="bg_fyData.limit"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="bg_fyData.totalRows"
                  @size-change="bg_handleSizeChange"
                  @current-change="bg_handleCurrentChange"
                />
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import tyTable from "@/components/ty_el_table/ty_el_table.vue";
export default {
  components: {
    tyTable,
  },
  data() {
    const tablePrps = [
      { key: "id", label: "id" },
      { diy_show: true, key: "url_ext", label: "图片" },
      { key: "link", label: "跳转地址" },
      { diy_show: true, key: "status", label: "启用状态" },
      { key: "created_at", label: "创建时间" },
      { key: "updated_at", label: "修改时间" },
    ];
    //资料表格
    const zl_tablePrps = [
      { key: "id", label: "id" },
      { diy_show: true, key: "url_ext", label: "图片" },
      { key: "link", label: "跳转地址" },
      { diy_show: true, key: "status", label: "启用状态" },
      { key: "created_at", label: "创建时间" },
      { key: "updated_at", label: "修改时间" },
    ];
    //报告表格
    const bg_tablePrps = [
      { key: "id", label: "id" },
      { diy_show: true, key: "url_ext", label: "图片" },
      { key: "link", label: "跳转地址" },
      { diy_show: true, key: "status", label: "启用状态" },
      { key: "created_at", label: "创建时间" },
      { key: "updated_at", label: "修改时间" },
    ];
    return {
      tablePrps,
      tableData: [
        {
          id: 1,
          url_ext: "",
          link: "",
          status: 1,
          created_at: "2023-10-01 12:00:00",
          updated_at: "2023-10-01 12:00:00",
        },
      ],
      serch_form: {
        phone: "",
      },
      fyData: {
        start: 1, //当前第几页
        limit: 10, //每页多少条
        totalRows: 0, //总数据条数
      },
      tab_active: "all",
      tab_list: [
        { label: "全部", name: "all" },
        { label: "企业", name: "enterprise" },
        { label: "个人", name: "person" },
      ],
      drawer_detail_show: false,
      //资料表格
      zl_tablePrps,
      zl_tableData: [
        {
          id: 1,
          url_ext: "",
          link: "",
          status: 1,
          created_at: "2023-10-01 12:00:00",
          updated_at: "2023-10-01 12:00:00",
        },
      ],
      zl_fyData: {
        start: 1, //当前第几页
        limit: 10, //每页多少条
        totalRows: 0, //总数据条数
      },
      //报告表格
      bg_tablePrps,
      bg_tableData: [
        {
          id: 1,
          url_ext: "",
          link: "",
          status: 1,
          created_at: "2023-10-01 12:00:00",
          updated_at: "2023-10-01 12:00:00",
        },
      ],
      bg_fyData: {
        start: 1, //当前第几页
        limit: 10, //每页多少条
        totalRows: 0, //总数据条数
      },
    };
  },
  methods: {
    init_fun() {},
    handleSizeChange(val) {
      this.fyData.limit = val;
      this.init_fun();
    },
    handleCurrentChange(val) {
      this.fyData.start = val;
      this.init_fun();
    },
    detail_click() {
      this.drawer_detail_show = true;
    },
    //资料表格分页函数
    zl_handleSizeChange(val) {
      this.zl_fyData.limit = val;
    },
    zl_handleCurrentChange(val) {
      this.zl_fyData.start = val;
    },
    //报告表格分页函数
    bg_handleSizeChange(val) {
      this.bg_fyData.limit = val;
    },
    bg_handleCurrentChange(val) {
      this.bg_fyData.start = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.peipao_body {
  .serch_div {
    background: linear-gradient(0deg, #f9fafe 0%, #ffffff 100%);
    box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
  }
  .table_body {
    background: linear-gradient(0deg, #f9fafe 0%, #ffffff 100%);
    box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
  }

  .d_title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
  .drawer_detail_body {
    width: 100%;
    padding: 20px;
    //标题 45 padding 40
    max-height: calc(100vh - 45px - 40px);
    overflow-y: auto;
    scrollbar-width: none;
    box-sizing: border-box;
    .item {
      background: linear-gradient(0deg, #f9fafe 0%, #ffffff 100%);
      box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
      border-radius: 12px;
      border: 2px solid #ffffff;
      box-sizing: border-box;
      padding: 20px;
      margin-top: 20px;
      .title {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #000000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 30px;
      }
    }
    .grid_div {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 15px;
      margin-top: 15px;
      .g_item {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #303233;
      }
    }
  }

  //抽屉样式自定义
  ::v-deep .el-drawer {
    background-color: #eff2f7;
  }
  ::v-deep .el-drawer__header {
    margin-bottom: 0;
  }

  //顶部报告tabs样式自定义
  .page_tab_div {
    ::v-deep .el-tabs__nav-scroll {
      background: linear-gradient(0deg, #f9fafe 0%, #ffffff 100%);
      box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
      border-radius: 12px;
      border: 2px solid #ffffff;
      box-sizing: border-box;
      padding: 0 20px;
    }
    ::v-deep .el-tabs__nav-wrap::after {
      content: none;
    }
    ::v-deep .el-tabs__header {
      margin: 0;
    }
    ::v-deep .el-tabs__item.is-active {
      color: #0084ff;
    }
    ::v-deep .el-tabs__active-bar {
      background-color: #0084ff;
    }

    ::v-deep .el-tabs__item.is-top:last-child {
      padding-right: 40px;
    }
  }
}
</style>
